<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function (){
            $('#quantity').bind('click',function (){
                var $itemid = $('#itemid').text();
                var $quantity1 = parseInt($('#quantity').val());
                var $listprice = parseInt($('#listprice').text());
                $(this).blur(function (){
                    var $quantity = parseInt($(this).val());
                    var $total = $quantity * $listprice;
                    $('#total').text($total);
                    var $subtotal = parseInt($('#subtotal').text()) + $listprice * ($quantity-$quantity1);
                    console.log($subtotal);
                    $('#subtotal').text($subtotal);
                    $.ajax({
                        //url
                        url: 'http://localhost:8088/cart/updateCart',
                        //请求参数
                        data: {
                            quantity: $quantity,
                            itemid: $itemid,
                            total: $total
                        },
                        //请求类型
                        type: 'GET',
                        //成功的回调，data参数返回的的是服务器传来的数据
                        success: function(data){
                            console.log("成功。。。。。");
                        },
                        //失败的回调
                        error: function(){
                            console.log("出错了。。。。。。。");
                        }
                    })
                })
            })
        })
    </script>
</head>
<body>
<div th:replace="/common/header"></div>

<div id="Content">
    <div id="BackLink"><a href="/main/enter">
    Return to Main Menu</a></div>
    <div id="Catalog">

        <div id="Cart">

            <h2>Shopping Cart</h2>
            <form action="UpdateCartQuantities?username=${sessionScope.username}" method="post">
                <style type="text/css">

                    table {
                        width: 700px;
                        padding: 0;
                        margin: 0;
                    }

                    caption {
                        padding: 0 0 5px 0;
                        width: 700px;
                        font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
                        text-align: right;
                    }

                    th {
                        font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
                        color: #4f6b72;
                        border-right: 1px solid #C1DAD7;
                        border-bottom: 1px solid #C1DAD7;
                        border-top: 1px solid #C1DAD7;
                        letter-spacing: 2px;
                        text-transform: uppercase;
                        text-align: left;
                        padding: 6px 6px 6px 12px;
                        background: #d5eaca no-repeat;
                    }

                    td {
                        border-right: 1px solid #C1DAD7;
                        border-bottom: 1px solid #C1DAD7;
                        background: #fff;
                        font-size:16px;
                        padding: 6px 6px 6px 12px;
                        color: #4f6b72;
                    }


                </style>
                <table id="tab">
                    <tr>
                        <th><b>Item ID</b></th>
                        <th><b>Product ID</b></th>
                        <th><b>Description</b></th>
                        <th><b>Quantity</b></th>
                        <th><b>List Price</b></th>
                        <th><b>Total Cost</b></th>
                        <th>&nbsp;</th>
                    </tr>
                    <tr th:if = "${subTotal == 0}">
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>

                    <tr th:each="cart:${cartList}">
                        <td>
                            <a th:href="${'/category/viewItem?itemId='}+${cart.itemid}" id="itemid"><th:block th:text="${cart.itemid}"/></a>
                        </td>
                        <td><th:block th:text="${cart.productid}" />
                        </td>
                        <td><th:block th:utext="${cart.description}" />
                        </td>
                        <!--<td><th:block th:text="${cart.stock}" />
                        </td>-->
                        <td>
                            <input type="text" id="quantity" class="im" name="${cart.itemid}"  th:value="${cart.quantity}">
                            <!--<script th:inline="javascript" type="text/javascript" src="../js/updateCart.js"></script>-->
                        </td>
                        <td id="listprice"><th:block th:text="${cart.listprice}" />
                        </td>
                        <td>
                            <label id="total">
                                <th:block th:text="${cart.total}" />
                            </label>
                            <!--<fmt:formatNumber value="${cart.total}"
                            pattern="$#,##0.00" />-->
                        </td>
                        <td>
                            <a th:href="${'/cart/deleteCartItem?itemid='}+${cart.itemid}" class="Button"> Remove </a>
                        </td>
                    </tr>
                    <script src="../js/cartChange.js"></script>
                    <tr>
                    <tr id="lastTR">
                        <td colspan="7" id="lastTD">
                            Sub Total:<label id="subtotal"><th:block th:text="${subTotal}" />
                        </label>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                </table>

                &nbsp;
                </tr>
                </table>

            </form>

            <a th:if="${subTotal > 0}" href="/order/getNewOrder" class="Button">Proceed to Checkout</a>
        </div>


        <div id="Separator">&nbsp;</div>
    </div>
</div>

<div th:replace="/common/footer"></div>
</body>
</html>